import React,{useState,useEffect} from 'react';
import { useParams } from 'react-router';
import Details from './detail';
import Replies from './replies';
import {Alert} from "antd"; // antd

export default function Topic() {
    const {id} = useParams();

    console.log('id',id);

    // 页面的三个状态
    const [loading,setLoading] = useState(true);
    const [isError,setIsError] = useState(false);
    const [data,setData] = useState('');


    const  [error_msg,setError_msg]  = useState('');
    useEffect( () => {

        fetch(`https://cnodejs.org/api/v1/topic/${id}`)
            .then( res => res.json())
            .then( data => {

                setLoading(false);

                if(data.success) {
                    setData(data.data);
                }else {
                    setIsError(true);
                    setError_msg(data.error_msg);
                }
                console.log('data',data);
            })
        
    },[id])
    return (

        <>
            {
                isError?
                    <>
                        <Alert
                            message={'请求出错了'}
                            closeable
                            type="error"
                            description={
                                <>
                                    <p>关闭</p>
                                    <p>返回</p>
                                    <p>error:{error_msg}</p>
                                </>
                            }
                        />
                    </>
                :
                    <>
                            <Details data={data} loading={loading}/>
                    </>
                    
                
            }
            
        </>
    )
}